<template>
	<view class="audit-list">
		<view class="audit-list-item" v-for="(item,index) in items" :key="item.id">
			<view class="audit-list-item__content" @tap="itemToDetail(item)">
				<view class="audit-list-item__content-img">
					<u-image width="80rpx" height="80rpx" radius="4rpx" :src="item.head||defaultHead"></u-image>
				</view>
				<view class="audit-list-item__content-left">
					<view class="audit-list-item__content-title">{{item.name}}</view>
					<view class="audit-list-item__content-desc">{{item.position}}</view>
				</view>
				<view class="audit-list-item__content-more bg-hover" v-if="showMore"
					@tap.stop.prevent="moreHandle(item, index)">
					<u-image width="32rpx" height="32rpx" radius="4rpx"
						src="https://file.casugn.com/storecompcard/static/img/more_1681888742837.png"></u-image>
				</view>
			</view>
			<view class="audit-list-item__btns" v-if="showOperate">
				<view class="audit-list-item__btn bg-hover" style="--color:#F53F3F" @tap="refuseHandle(item,index)">
					<view style="margin-right: 10rpx;" v-if="item._loading_refuse">
						<u-loading-icon mode="spinner" size="30rpx" color="#c9c9c9"></u-loading-icon>
					</view>
					<text>拒绝申请</text>
				</view>
				<view class="audit-list-item__btn bg-hover" style="--color:#276AEE" @tap="acceptHandle(item,index)">
					<view style="margin-right: 10rpx;" v-if="item._loading_accept">
						<u-loading-icon mode="spinner" size="30rpx" color="#c9c9c9"></u-loading-icon>
					</view>
					<text style="margin-left: 10rpx;">通过申请</text>
				</view>
			</view>
		</view>

		<!-- 查看人员详情信息弹窗 -->
		<member-popup ref="MemberPopup"></member-popup>

		<!-- 点击更多弹窗 -->
		<member-popup ref="MemberPopupMore" :showDelete="true" :showEdit="true" @delete="memberDelete"></member-popup>
	</view>
</template>

<script>
	import MemberPopup from './member-popup.vue'
	import { defaultHead } from '@/config/staticConfig.js'

	export default {
		components: { MemberPopup },
		props: {
			list: {
				type: Array,
				default: () => []
			},
			cardId: {
				type: String,
				default: 'id'
			},
			// 显示拒绝/通过按钮
			showOperate: {
				type: Boolean,
				default: false
			},
			// 显示更多按钮
			showMore: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				defaultHead,
				memberInfo: {}, //名片审核 中查看人员详情 
				memberInfoLoading: false,
			}
		},
		computed: {
			items() {
				return this.list
			}
		},
		methods: {
			memberDelete(index) {
				this.list.splice(index, 1)
				this.$emit('refresh', JSON.parse(JSON.stringify(this.items)))
			},
			async itemToDetail(item) {
				this.$refs.MemberPopup.show()

				let res = await this.$api.queryCartById({ id: item[this.cardId] })
				if (res.success) {
					this.$refs.MemberPopup.show(res.result, false)
				} else {
					this.$refs.MemberPopup.show(item, false)
				}
			},
			moreHandle(item, index) {
				this.$refs.MemberPopupMore.show({ ...item, _index: index }, false)
			},
			async refuseHandle(item, index) {
				const that = this
				uni.showModal({
					title: '提示',
					content: `确定拒绝 ${item.name} 申请?`,
					success: async (res) => {
						if (res.confirm) {
							that.$set(item, '_loading_refuse', true)
							let res = await that.$api.rejectMember(item.id)
							that.$set(item, '_loading_refuse', false)
							if (res.success) {
								uni.showToast({ title: '提交成功', icon: 'none' });
								that.memberDelete(index)
							} else {
								uni.showToast({ title: res.message || '提交失败，请重试！', icon: 'none' });
							}
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				})
			},
			async acceptHandle(item, index) {
				const that = this
				uni.showModal({
					title: '提示',
					content: `确定接受 ${item.name} 申请?`,
					success: async (res) => {
						if (res.confirm) {
							that.$set(item, '_loading_accept', true)
							let res = await that.$api.passMember(item.id)
							that.$set(item, '_loading_accept', false)
							if (res.success) {
								uni.showToast({ title: '提交成功', icon: 'none' });
								that.memberDelete(index)
							} else {
								uni.showToast({ title: res.message || '提交失败，请重试！', icon: 'none' });
							}
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.audit-list {
		padding: 0 32rpx;

		.audit-list-item {
			background-color: #fff;
			border-radius: 8rpx;

			&:nth-child(n+2) {
				margin-top: 24rpx;
			}

			.audit-list-item__content {
				padding: 24rpx;

				display: flex;
				align-items: center;

				.audit-list-item__content-img {
					margin-right: 24rpx;
					flex: 0 0 auto;
				}

				.audit-list-item__content-left {

					.audit-list-item__content-title {
						font-size: 32rpx;
						font-weight: 600;
						color: #1D2129;
						line-height: 44rpx;
					}

					.audit-list-item__content-desc {
						margin-top: 16rpx;
						font-size: 24rpx;
						color: #4E5969;
						line-height: 34rpx;
					}
				}

				.audit-list-item__content-more {
					margin-left: auto;
					margin-right: -16rpx;
					padding: 16rpx;
				}
			}

			.audit-list-item__btns {
				position: relative;
				padding: 8rpx 24rpx 16rpx;

				display: flex;
				align-items: center;

				&::before {
					content: "";
					position: absolute;
					top: 0;
					left: 32rpx;
					right: 32rpx;
					border-bottom: 2rpx solid #E5E6EB;
				}

				.audit-list-item__btn {
					width: 100%;
					height: 56rpx;
					font-size: 28rpx;
					color: var(--color);
					line-height: 40rpx;
					border-radius: 4rpx;

					display: flex;
					justify-content: center;
					align-items: center;
				}
			}
		}
	}
</style>